<template>
  <div>
    <p>总数：{{total}}</p>
    <my-component 
      @increase="handleGetTotal"
      @reduce="handleGetTotal"
      ></my-component>
    <br/>

  </div>
</template>
<script>
export default {
  data(){
    return {
      total:0,
    }
  },
  methods:{
    handleGetTotal(total){
      this.total = total;
    }
  },
  components:{
    'my-component':{
      template:`
        <div>
          <button @click="handleIncrease">+1</button>
          <button @click="handleReduce">-1</button>
        </div>
      `,
      data(){
        return {
          counter:0,
        }
      },
      methods:{
        handleIncrease(){
          this.counter++;
          this.$emit('increase',this.counter);
        },
        handleReduce(){
          this.counter--;
          this.$emit('reduce',this.counter);
        },
      }
    },
  }
}
</script>
<style scoped>

</style>


